html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

*::selection {
  background: #569cd6 !important;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  80% {
    box-shadow: none;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@font-face {
  font-family: BASE;
  src: url("ClearSans-Bold.woff2");
  font-weight: bold;
}

@font-face {
  font-family: BASE;
  src: url("ClearSans-Regular.woff2");
}

@font-face {
  font-family: monospace;
  src: url("Iosevka-Regular.woff2");
}

@font-face {
  font-family: monospace;
  src: url("Iosevka-Bold.woff2");
  font-weight: bold;
}

* {
  font-family: monospace, BASE;
  font-size: 20px;
  line-height: 30px;
  outline: none;
}

html {
  -webkit-app-region: drag;
}

.CodeMirror,
#close {
  -webkit-app-region: no-drag;
}

:root,
.CodeMirror {
  background: #252526;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.loading {
  margin: auto;
  position: absolute;
  top: calc(50% - 35px);
  left: calc(50% - 35px);
  width: 70px;
  height: 70px;
  display: block;
  transition: all 0.3s;
}

.loading span {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: i 5.5s infinite;
}

.loading span:after {
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 10px;
}

.loading span:nth-child(1) {
  animation-delay: 0.18s;
}

.loading span:nth-child(2) {
  animation-delay: 0.36s;
}

.loading span:nth-child(3) {
  animation-delay: 0.54s;
}

.loading span:nth-child(4) {
  animation-delay: 0.72s;
}

.loading span:nth-child(5) {
  animation-delay: 0.9s;
}

.loading span:nth-child(6) {
  animation-delay: 1.08s;
}

@keyframes i {
  0% {
    opacity: 1;
    transform: rotate(180deg);
    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
  }

  7% {
    opacity: 1;
    transform: rotate(300deg);
    animation-timing-function: linear;
  }

  30% {
    opacity: 1;
    transform: rotate(450deg);
    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
  }

  39% {
    opacity: 1;
    transform: rotate(645deg);
    animation-timing-function: linear;
  }

  63% {
    opacity: 1;
    transform: rotate(800deg);
    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
  }

  68% {
    opacity: 1;
    transform: rotate(920deg);
    animation-timing-function: ease-in;
  }

  69% {
    opacity: 0;
    transform: rotate(920deg);
  }

  100% {
    opacity: 0;
    transform: rotate(900deg);
  }
}
html {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  user-select: none;
}
.main {
  padding: 8vh 8vw;
  height: 84vh;
  width: 84vw;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #0000;
}

::-webkit-scrollbar-track {
  background-color: #0000;
}

::-webkit-scrollbar-thumb {
  background-color: #ffffff33;
  border-radius: 0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #fff5;
}

::-webkit-scrollbar-thumb:active {
  background-color: #fff2;
}

#close {
  background: #e000;
  width: 45px;
  height: 30px;
  /* border-radius: 50%; */
  position: fixed;
  top: 0;
  right: 0;
  /* box-shadow: #0005 0 5px 15px; */
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
}

#close:hover {
  opacity: 1;
  background: #e00a;
}

#close:active {
  opacity: 0.5;
  transition: opacity 0.1s, background 0.1s;
}

#close:before,
#close:after {
  content: "";
  background: #fff;
  position: absolute;
  width: 1.5px;
  height: 13px;
  top: 8.5px;
  left: 22px;
}

#close:before {
  transform: rotate(45deg);
}

#close:after {
  transform: rotate(-45deg);
}

.CodeMirror {
  width: 100%;
  height: 100%;
}

.Codemirror-hints {
  background: #353b48;
  border-color: #737373;
}

.Codemirror-hint {
  color: #d7d7db;
}

div.CodeMirror-selected {
  background: #264f78 !important;
}

.CodeMirror-line > span > span::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line::selection {
  background: #264f78;
}

.CodeMirror-line > span > span::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line::-moz-selection {
  background: #264f78;
}

.CodeMirror-gutters {
  background: #ffffff05;
  border-right: 3px solid #4a4a4f;
}

.CodeMirror-activeline-gutter {
  border-right: #fff3 solid 2px;
  background: #fff1;
}

.CodeMirror-line {
  padding-left: 1px !important;
}

.CodeMirror-guttermarker,
.CodeMirror-guttermarker-subtle {
  color: #555 !important;
}

.CodeMirror-activeline-gutter .CodeMirror-linenumber {
  color: #eee !important;
}

.CodeMirror-linenumber {
  color: #939393 !important;
}

.CodeMirror-cursor {
  border-left: 3px solid #fff8 !important;
}

span.cm-comment {
  color: #939393 !important;
}

span.cm-atom,
span.cm-attribute,
span.cm-builtin,
span.cm-error,
span.cm-keyword,
span.cm-quote {
  color: #ff7de9 !important;
}

span.cm-number,
span.cm-string,
span.cm-string-2 {
  color: #6b89ff !important;
}

span.cm-hr,
span.cm-meta {
  color: #939393 !important;
}

span.cm-header,
span.cm-qualifier,
span.cm-variable-2 {
  color: #75bfff !important;
}

span.cm-property {
  color: #86de74 !important;
}

span.cm-bracket,
span.cm-def,
span.cm-link:visited,
span.cm-tag {
  color: #75bfff !important;
}

span.cm-tag {
  font-weight: bold;
  text-decoration: underline;
  font-style: italic;
}

span.cm-variable {
  color: #b98eff !important;
}

span.cm-variable-3 {
  color: #d7d7db !important;
}

span.cm-link {
  color: #737373 !important;
}

span.cm-operator {
  color: #b1b1b3 !important;
}

span.cm-special {
  color: #d7d7db !important;
}

.CodeMirror-activeline-background {
  background: rgba(185, 215, 253, 0.05);
  animation: fade 0.3s;
}

.CodeMirror-matchingbracket {
  outline: rgba(255, 255, 255, 0.25) solid 1px;
  color: #fff;
}

select {
  color: silver;
}

option,
optgroup {
  background-color: #2a2a2e;
}
